<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>借贷详情</title>
    <div th:include="includeJs::layui_js"></div>
    <link rel="stylesheet" th:href="@{/css/account/lay-cz.css}">
</head>
<body>
<span></span>
<span></span>
<span></span>
<span></span>
<table class="layui-table" lay-skin="line" style="text-align: center">
    <tr>
        <th>借贷金额</th>
        <td th:text="${ls.max_money}"></td>
    </tr>
    <tr>
        <th>待还金额</th>
        <td th:text="${ls.surplus_money}"></td>
    </tr>
    <tr>
        <th>年利率</th>
        <td th:text="${ls.interest_rate}+' %'"></td>
    </tr>
    <tr>
        <th>每期还款</th>
        <td th:text="${ls.r_money}"></td>
    </tr>
    <tr>
        <th>借贷期数</th>
        <td th:text="${ls.l_month}"></td>
    </tr>
    <tr>
        <th>已还期数</th>
        <td th:text="${ls.already_month}"></td>
    </tr>
    <tr>
        <th>审核备注</th>
        <td th:text="${ls.audit_comment}"></td>
    </tr>
    <tr th:if="${term!=null}">
        <th>
            下期最后还款日
        </th>
        <td th:text="${#dates.format(term,'yyyy年MM月dd日')}"></td>
    </tr>
    <tr th:if="${(qishu - 1 - ls.already_month)>0}">
        <th>逾期期数</th>
        <td style="color: red" th:text="${qishu - 1 -  ls.already_month}"></td>
    </tr>
    <tr>
        <td th:if="${ls.residue_money>0}" colspan="2" style="text-align: center;color: orange">
            请按时还款,逾期将扣除信用分!
        </td>
        <td th:if="${ls.residue_money==0}" colspan="2" style="text-align: center;color: #38e738">
            恭喜你已成功还清账单!
        </td>
    </tr>
    <tr>
        <td th:if="${ls.residue_money>0}" colspan="2" style="text-align: center">
            <button onclick="loan()" class="layui-btn">立即还款</button>
        </td>
        <td th:if="${ls.residue_money<=0}" colspan="2" style="text-align: center">
            <button  class="layui-btn layui-btn-disabled layui-btn-radius">已还清</button>
        </td>
    </tr>
</table>
<div id="password-div" class="password-div" style="display: none;margin-left: 120px;margin-top: 35px;">
    <label id="pwd" for="password" class="password-lable">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <input id="password" type="password" name="password" maxlength="6">
    </label>
    <div style="margin-top: 50px;margin-left: 50px;">
        <button type="button" id="qdcz" class="layui-btn layui-btn-danger  layui-btn-radius" style="width: 100px;">确定</button>
    </div>
</div>
</body>
<!--支付密码-->
<script>
    function loan(){
        layer.open({
            type: 1,
            title: '请输入支付密码',
            skin: 'layui-layer-demo', //样式类名
            area: ['450px', '200px'],
            closeBtn: 2, //不显示关闭按钮
            fixed: false, //不固定
            maxmin: true,
            content: $('#password-div'),
            cancel: function(){//右上角关闭回调
                //刷新父页面
                window.location.reload();
            }
        });
        $("#pwd").focus();
    }

    //借贷id
    const lid =  [[${ls.l_id}]];
    //还款金额
    const rMoney =  [[${ls.r_money}]];
    //剩余还款金额
    const surplusMoney =  [[${ls.surplus_money}]];
    //已还期数
    const alreadyMonth =  [[${ls.already_month}]];
    //剩余期数
    const residueMoney =  [[${ls.residue_money}]];

    $("#qdcz").click(function () {
        let $password= $("#password").val();
        if(null == $password || $password.length!=6){
            layer.msg('请输入密码。',{time:2000,icon:2});
            return;
        }else {
            let loading = layer.load(1, {
                shade: [0.1,'#fff'] //0.1透明度的白色背景
            });
            $.ajax({//支付交易密码
                url:"/repayment",
                type:"post",
                data:{
                    lId:lid,
                    rMoney:rMoney,
                    alreadyMonth:alreadyMonth,
                    surplusMoney:surplusMoney,
                    residueMoney:residueMoney,
                    paypwd:$password
                },
                dataType:"json",
                success:function (data) {
                    if(data ==0){
                        layer.msg('还款成功',{time:1000,icon:1});
                        setTimeout(function (){
                            window.location.reload();
                        },1001);
                    }else if(data==1){
                        layer.msg("密码错误,请重新输入",{time:1000,icon:2});
                        $("#pwd ul li").text('');
                        layer.close(loading);
                        return;
                    }else if(data==2){
                        layer.msg("账户已被锁定,请明天再试!",{time:1000,icon:2});
                        $("#pwd ul li").text('');
                        //$("#pwd").focus();
                        layer.close(loading);
                        return;
                    }else if(data==3){
                        layer.msg("您的余额不足,请充值后再试!",{time:1000,icon:2});
                        layer.close(loading);
                        return;
                    }
                },
                error:function () {
                    layer.msg('服务器错误!请稍后再试!');
                }
            })
        }
    })
    //查询支付密码
    $(".password-div input").on("input",function(e){ //标签为password-div下的input添加oninput事件
        let number = 6;   //定义输入最大值
        let pw = $("input[name = 'password']").val(); //定义pw为name是password的input框的输入值
        let list = $(".password-div ul li");  //定义list是li
        for(let i = 0; i < number ; i++){    //for循环遍历将·放入li标签
            if(pw[i]){
                $(list[i]).text("·");
            }else{
                $(list[i]).text("");
            };
        };
    });
    $(".password-div ul").click(function(){
        $("input[name = 'password']").val("");
        $("#password").focus();
        $(".password-div ul li").text("");
    });

    $(function () {
        $(document).keydown(function (e) {
            if (e.keyCode === 13) {
                $("#qdcz").click();
            }
        });
    });
</script>
</html>